<template>
  <view class="house-detail">
    <!-- 房源图片轮播 -->
    <swiper class="swiper" circular indicator-dots>
      <swiper-item v-for="(img, index) in houseDetail.images" :key="index">
        <image :src="img" mode="aspectFill"></image>
      </swiper-item>
    </swiper>

    <!-- 基本信息 -->
    <view class="info-section">
      <view class="title">{{houseDetail.title}}</view>
      <view class="price">
        <text class="amount">{{houseDetail.price}}</text>
        <text class="unit">元/月</text>
      </view>
      <view class="tags">
        <text v-for="(tag, index) in houseDetail.tags" :key="index" class="tag">{{tag}}</text>
      </view>
    </view>

    <!-- 房屋信息 -->
    <view class="info-section">
      <view class="section-title">房屋信息</view>
      <view class="house-info">
        <view class="info-item">
          <text class="label">面积</text>
          <text class="value">{{houseDetail.area}}</text>
        </view>
        <view class="info-item">
          <text class="label">朝向</text>
          <text class="value">{{houseDetail.orientation}}</text>
        </view>
        <view class="info-item">
          <text class="label">楼层</text>
          <text class="value">{{houseDetail.floor}}</text>
        </view>
      </view>
    </view>

    <!-- 联系按钮 -->
    <view class="contact-bar">
      <button class="contact-btn" type="primary" @tap="handleContact">联系房东</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      houseDetail: {
        images: [
          '/static/images/house-demo.jpg',
          '/static/images/house-demo.jpg',
          '/static/images/house-demo.jpg'
        ],
        title: '整租·观湖智造创意园·2室1厅',
        price: '4500',
        tags: ['近地铁', '随时看房', '精装修'],
        area: '80㎡',
        orientation: '朝南',
        floor: '中层/18层'
      }
    }
  },
  onLoad(options) {
    // 获取房源详情数据
    this.getHouseDetail(options.id)
  },
  methods: {
    async getHouseDetail(id) {
      try {
        // 这里模拟接口请求
        await new Promise(resolve => setTimeout(resolve, 500))
        // 实际项目中这里需要调用后端接口获取数据
      } catch (e) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },
    handleContact() {
      uni.showToast({
        title: '联系房东功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="less">
@import '../../styles/uni.less';

.house-detail {
  min-height: 100vh;
  background-color: @bg-color-grey;
}

.swiper {
  height: 500rpx;
  
  image {
    width: 100%;
    height: 100%;
  }
}

.info-section {
  margin-top: @spacing-sm;
  padding: @spacing-lg;
  background-color: @bg-color;
  
  .title {
    font-size: @font-size-lg;
    font-weight: bold;
    color: @text-color;
  }
  
  .price {
    margin: @spacing-sm 0;
    
    .amount {
      font-size: 40rpx;
      color: @error-color;
      font-weight: bold;
    }
    
    .unit {
      font-size: @font-size-sm;
      color: @text-color-light;
      margin-left: @spacing-xs;
    }
  }
  
  .tags {
    display: flex;
    flex-wrap: wrap;
    
    .tag {
      padding: 4rpx @spacing-sm;
      background-color: @bg-color-grey;
      color: @text-color-light;
      font-size: @font-size-sm;
      margin-right: @spacing-sm;
      margin-bottom: @spacing-sm;
      border-radius: @border-radius-sm;
    }
  }
}

.section-title {
  font-size: @font-size-lg;
  color: @text-color;
  margin-bottom: @spacing-md;
}

.house-info {
  .info-item {
    display: flex;
    margin-bottom: @spacing-sm;
    
    .label {
      color: @text-color-light;
      width: 120rpx;
    }
    
    .value {
      color: @text-color;
      flex: 1;
    }
  }
}

.contact-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: @spacing-md;
  background-color: @bg-color;
  
  .contact-btn {
    width: 100%;
  }
}
</style> 